﻿
//自定义表单组件
(function ($, ibpm) {
    "use strict";
    var ruleCode;
    //得到日期年月日等加数字后的日期
    Date.prototype.DateAdd = function (strInterval, Number) {
        var dtTmp = this;
        switch (strInterval) {
            case 's': return new Date(Date.parse(dtTmp) + (1000 * Number));// 秒
            case 'n': return new Date(Date.parse(dtTmp) + (60000 * Number));// 分
            case 'h': return new Date(Date.parse(dtTmp) + (3600000 * Number));// 小时
            case 'd': return new Date(Date.parse(dtTmp) + (86400000 * Number));// 天
            case 'w': return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));// 星期
            case 'q': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number * 3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());// 季度
            case 'm': return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());// 月
            case 'y': return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());// 年
        }
    }
    //计算两日期相差的日期年月日等
    Date.prototype.DateDiff = function (strInterval, dtEnd) {
        var dtStart = this;
        if (typeof dtEnd == 'string')//如果是字符串转换为日期型  
        {
            dtEnd = ibpm.parseDate(dtEnd);
        }
        switch (strInterval) {
            case 's': return parseInt((dtEnd - dtStart) / 1000);
            case 'n': return parseInt((dtEnd - dtStart) / 60000);
            case 'h': return parseInt((dtEnd - dtStart) / 3600000);
            case 'd': return parseInt((dtEnd - dtStart) / 86400000);
            case 'w': return parseInt((dtEnd - dtStart) / (86400000 * 7));
            case 'm': return (dtEnd.getMonth() + 1) + ((dtEnd.getFullYear() - dtStart.getFullYear()) * 12) - (dtStart.getMonth() + 1);
            case 'y': return dtEnd.getFullYear() - dtStart.getFullYear();
        }
    }
    // 获取组件行显示html
    function getComponentRowHtml(data) {
        var _html = '<div class="M-compont-title"><span>' + data.name + '</span><div class="M-compont-remove"><i title="移除组件" class="del fa fa-close"></i></div></div><div class="M-compont-value">' + data.text + '</div>';
        return _html;
    };
    // 设置组件公共属性设置html
    function setComponentPropertyHtml($component, verifyData) {
        var designerDfop = $component.parent()[0].dfop;
        var dfop = $component[0].dfop;
        //---在设计器中定义好布局，在布局中插入html数据---
        var $html = $(".M-custmerform-designer-layout-right .M-scroll-box");
        var _html = '';
        _html += '<div class="M-component-title">组件字段</div>';
        _html += '<div class="M-component-control"><input id="M_component_field" type="text" class="form-control" placeholder="必填项"/></div>';
        _html += '<div class="M-component-title">组件标题</div>';
        _html += '<div class="M-component-control"><input id="M_component_title" type="text" class="form-control" placeholder="必填项"/></div>';
        if (!!verifyData) {
            _html += '<div class="M-component-title">字段验证</div>';
            _html += '<div class="M-component-control"><div id="M_component_verify"></div></div>';
        }
        _html += '<div class="M-component-title">所占行比例</div>';
        _html += '<div class="M-component-control"><div id="M_component_proportion"></div></div>';
        $html.html(_html);

        // 设置组件绑定的字段
        $html.find('#M_component_field').val(dfop.field);
        $html.find('#M_component_field').on('input propertychange', function () {
            var value = $(this).val();
            dfop.field = value;
        });

        // 标题设置
        $html.find('#M_component_title').val(dfop.title);
        $html.find('#M_component_title').on('input propertychange', function () {
            var value = $(this).val();
            $component.find('.M-compont-title span').text(value);
            dfop.title = value;
        });
        if (!!verifyData) {
            // 字段验证
            $('#M_component_verify').ibpm_select({
                data: verifyData,
                value: 'id',
                text: 'text',
                allowSearch: true,
                select: function (item) {
                    if (!!item) {
                        dfop.verify = item.id;
                    }
                    else {
                        dfop.verify = "";
                    }
                }
            });
            $('#M_component_verify').ibpm_selectSet(dfop.verify);
        }
        // 所在行占比
        $('#M_component_proportion').ibpm_select({
            data: [
                {
                    id: '1', text: '1'
                },
                {
                    id: '2', text: '1/2'
                },
                {
                    id: '3', text: '1/3'
                },
                {
                    id: '4', text: '1/4'
                },
                {
                    id: '6', text: '1/6'
                }
            ],
            placeholder: false,
            value: 'id',
            text: 'text',
            select: function (item) {
                if (!!item) {
                    dfop.proportion = item.id;
                }
                else {
                    dfop.proportion = '1';
                }

                $component.css({ 'width': 100 / parseInt(dfop.proportion) + '%' });
            }
        });
        $('#M_component_proportion').ibpm_selectSet(dfop.proportion);

        return $html;
    };
    function setComponentPropertyHtmlex($component) {
        var designerDfop = $component.parent()[0].dfop;
        var dfop = $component[0].dfop;
        //---在设计器中定义好布局，在布局中插入html数据---
        var $html = $(".M-custmerform-designer-layout-right .M-scroll-box");
        var _html = '';
        _html += '<div class="M-component-title">组件标题</div>';
        _html += '<div class="M-component-control"><input id="M_component_title" type="text" class="form-control" placeholder="必填项"/></div>';
        _html += '<div class="M-component-title">所占行比例</div>';
        _html += '<div class="M-component-control"><div id="M_component_proportion"></div></div>';
        $html.html(_html);

        // 标题设置
        $html.find('#M_component_title').val(dfop.title);
        $html.find('#M_component_title').on('input propertychange', function () {
            var value = $(this).val();
            $component.find('.M-compont-title span').text(value);
            dfop.title = value;
        });
        // 所在行占比
        $('#M_component_proportion').ibpm_select({
            data: [
                {
                    id: '1', text: '1'
                },
                {
                    id: '2', text: '1/2'
                },
                {
                    id: '3', text: '1/3'
                },
                {
                    id: '4', text: '1/4'
                },
                {
                    id: '6', text: '1/6'
                }
            ],
            placeholder: false,
            value: 'id',
            text: 'text',
            select: function (item) {
                if (!!item) {
                    dfop.proportion = item.id;
                }
                else {
                    dfop.proportion = '1';
                }

                $component.css({ 'width': 100 / parseInt(dfop.proportion) + '%' });
            }
        });
        $('#M_component_proportion').ibpm_selectSet(dfop.proportion);

        return $html;
    };
    function setComponentPropertyHtmlpic($component) {
        var designerDfop = $component.parent()[0].dfop;
        var dfop = $component[0].dfop;
        //---在设计器中定义好布局，在布局中插入html数据---
        var $html = $(".M-custmerform-designer-layout-right .M-scroll-box");
        var _html = '';
        _html += '<div class="M-component-title">组件标题</div>';
        _html += '<div class="M-component-control"><input id="M_component_title" type="text" class="form-control" placeholder="必填项"/></div>';
        _html += '<div class="M-component-title">所占行比例</div>';
        _html += '<div class="M-component-control"><div id="M_component_proportion"></div></div>';
        _html += '<div class="M-component-title">数据要求</div>';
        _html += '<div class="M-component-control"><div id="M_Pic_OnlyRead"></div></div>';
        $html.html(_html);

        // 标题设置
        $html.find('#M_component_title').val(dfop.title);
        $html.find('#M_component_title').on('input propertychange', function () {
            var value = $(this).val();
            $component.find('.M-compont-title span').text(value);
            dfop.title = value;
        });
        // 所在行占比
        $('#M_component_proportion').ibpm_select({
            data: [
                {
                    id: '1', text: '1'
                },
                {
                    id: '2', text: '1/2'
                },
                {
                    id: '3', text: '1/3'
                },
                {
                    id: '4', text: '1/4'
                },
                {
                    id: '6', text: '1/6'
                }
            ],
            placeholder: false,
            value: 'id',
            text: 'text',
            select: function (item) {
                if (!!item) {
                    dfop.proportion = item.id;
                }
                else {
                    dfop.proportion = '1';
                }

                $component.css({ 'width': 100 / parseInt(dfop.proportion) + '%' });
            }
        });
        $('#M_component_proportion').ibpm_selectSet(dfop.proportion);
        //数据要求
        $('#M_Pic_OnlyRead').ibpm_select({
            data: [{ id: '0', text: '编辑' }, { id: '1', text: '只读' }],
            value: 'id',
            text: 'text',
            placeholder: false,
            select: function (item) {
                if (!!item) {
                    dfop.OnlyRead = item.id;
                }
                else {
                    dfop.OnlyRead = '0';
                }
            }
        }).ibpm_selectSet(dfop.OnlyRead);

        return $html;
    };

    // 表字段
    var verifyDatalist = [
        { id: "NotNull", text: "不能为空！" },
        { id: "Num", text: "必须为数字！" },
        { id: "NumOrNull", text: "数字或空！" },
        { id: "Email", text: "必须为E-mail格式！" },
        { id: "EmailOrNull", text: "E-mail格式或空！" },
        { id: "EnglishStr", text: "必须为字符串！" },
        { id: "EnglishStrOrNull", text: "字符串或空！" },
        { id: "Phone", text: "必须电话格式！" },
        { id: "PhoneOrNull", text: "电话格式或者空！" },
        { id: "Fax", text: "必须为传真格式！" },
        { id: "Mobile", text: "必须为手机格式！" },
        { id: "MobileOrNull", text: "手机格式或者空！" },
        { id: "MobileOrPhone", text: "电话格式或手机格式！" },
        { id: "MobileOrPhoneOrNull", text: "电话格式或手机格式或空！" },
        { id: "Uri", text: "必须为网址格式！" },
        { id: "UriOrNull", text: "网址格式或空！" }
    ];
    var verifyDatalist2 = [
        { id: "NotNull", text: "不能为空！" }
    ];

    var fieldMap = {};  //字段地图

    $.BPM_FormComponents = {
        //文本标题
        label: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="label"><i class="fa fa-font"></i>标 题</div>');
                return $html;
            },
            //绘制设计器内容（设计器调用）
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '标 题',
                    type: "label",
                    proportion: '1',
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "标 题" }));
            },
            //右侧组件属性（设计器调用）
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = $(".M-custmerform-designer-layout-right .M-scroll-box");
                var _html = '';
                _html += '<div class="M-component-title">组件标题</div>';
                _html += '<div class="M-component-control"><input id="M_component_title" type="text" class="form-control" placeholder="必填项"/></div>';
                _html += '<div class="M-component-control"><div id="M_component_verify"></div></div>';
                _html += '<div class="M-component-title">所占行比例</div>';
                _html += '<div class="M-component-control"><div id="M_component_proportion"></div></div>';
                $html.html(_html);
                // 标题设置
                $html.find('#M_component_title').val(dfop.title);
                $html.find('#M_component_title').on('input propertychange', function () {   //input属性变动事件
                    var value = $(this).val();
                    dfop.title = value;
                    $component.find('.M-compont-title span').text(value);
                });
                // 所在行占比
                $('#M_component_proportion').ibpm_select({  //用自己的组件，显示，方便配置事件
                    data: [
                        {
                            id: '1', text: '1'
                        },
                        {
                            id: '2', text: '1/2'
                        },
                        {
                            id: '3', text: '1/3'
                        },
                        {
                            id: '4', text: '1/4'
                        },
                        {
                            id: '5', text: '1/5'
                        },
                        {
                            id: '6', text: '1/6'
                        }
                    ],
                    placeholder: false,
                    value: 'id',
                    text: 'text',
                    select: function (item) {
                        if (!!item) {
                            dfop.proportion = item.id;
                        }
                        else {
                            dfop.proportion = '1';
                        }
                        $component.css({ 'width': 100 / parseInt(dfop.proportion) + '%' });
                    }
                });
                $('#M_component_proportion').ibpm_selectSet(dfop.proportion);
            },
            //绘制渲染器内容（表单还原时调用）
            renderTable: function (compont, $row) {
                $row.find('.M-form-item-title').remove();
                $row.append("<span>" + compont.title + "<span>");
                $row.css({ 'padding': '0', 'line-height': '38px', 'text-align': 'center', 'font-size': '20px', 'font-weight': 'bold', 'color': '#333' });
            }
        },
        //标签文本
        html: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="html"><i class="fa fa-file-o"></i>标签文本</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '',
                    type: "html",
                    proportion: '1',
                };
                $component.html(getComponentRowHtml({ name: "标签文本", text: "标签文本" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = $(".M-custmerform-designer-layout-right .M-scroll-box");
                var _html = '';
                _html += '<div class="M-component-title">文本内容</div>';
                _html += '<div class="M-component-control"><textarea id="M_component_title" type="text" style="height:300px;" class="form-control" placeholder="必填项"></textarea></div>';
                _html += '<div class="M-component-control"><div id="M_component_verify"></div></div>';
                _html += '<div class="M-component-title">所占行比例</div>';
                _html += '<div class="M-component-control"><div id="M_component_proportion"></div></div>';
                $html.html(_html);
                // 标题设置
                $html.find('#M_component_title').val(htmlDecode(dfop.title));
                $html.find('#M_component_title').on('input propertychange', function () {
                    var value = $(this).val();
                    dfop.title = htmlEncode(value);
                });
                // 所在行占比
                $('#M_component_proportion').ibpm_select({
                    data: [
                        {
                            id: '1', text: '1'
                        },
                        {
                            id: '2', text: '1/2'
                        },
                        {
                            id: '3', text: '1/3'
                        },
                        {
                            id: '4', text: '1/4'
                        },
                        {
                            id: '5', text: '1/5'
                        },
                        {
                            id: '6', text: '1/6'
                        }
                    ],
                    placeholder: false,
                    value: 'id',
                    text: 'text',
                    select: function (item) {
                        if (!!item) {
                            dfop.proportion = item.id;
                        }
                        else {
                            dfop.proportion = '1';
                        }
                        $component.css({ 'width': 100 / parseInt(dfop.proportion) + '%' });
                    }
                });
                $('#M_component_proportion').ibpm_selectSet(dfop.proportion);
            },
            renderTable: function (compont, $row) {
                $row.find('.M-form-item-title').remove();
                $row.html(htmlDecode(compont.title));
            }
        },
        //文本框
        text: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="text"><i class="fa fa-italic"></i>文本框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '文本框',
                    type: "text",
                    field: "",
                    proportion: '1',
                    verify: '',
                    isHide: '0',  // 是否隐藏--隐藏ID或Key之类的字段
                    dfvalue: '' // 默认值
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "文本框" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component, verifyDatalist);
                var _html = '';
                _html += '<div class="M-component-title">是否隐藏</div>';
                _html += '<div class="M-component-control"><div id="M_component_isHide"></div></div>';
                _html += '<div class="M-component-title">默认值<i title="仅在添加数据时默认填入" class="help fa fa-question-circle"></i></div>';
                _html += '<div class="M-component-control"><input id="M_component_dfvalue" type="text" class="form-control" placeholder="无则不填"/></div>';

                $html.append(_html);
                $('#M_component_isHide').ibpm_select({
                    placeholder: false,
                    data: [{ id: '0', text: '否' }, { id: '1', text: '是' }],
                    value: 'id',
                    text: 'text',
                    select: function (item) {
                        if (!!item) {
                            dfop.isHide = item.id;
                        }
                        else {
                            dfop.isHide = '0';
                        }
                    }
                });
                $('#M_component_isHide').ibpm_selectSet(dfop.isHide);

                $html.find('#M_component_dfvalue').val(dfop.dfvalue);
                $html.find('#M_component_dfvalue').on('input propertychange', function () {
                    var value = $(this).val();
                    dfop.dfvalue = value;
                });
            },
            //---组件渲染成什么由这个方法决定---
            renderTable: function (compont, $row) {
                var $compont = $('<input id="' + compont.id + '" type="text" class="form-control" />');
                $compont.val(compont.dfvalue);
                $row.append($compont);
                if (compont.isHide == '1') {
                    $row.hide();
                }
                return $compont;
            },
            //绘制查询渲染
            renderQuery: function (compont, $row) {
                var $compont = $('<input id="' + compont.id + '" type="text" class="form-control" />');
                $row.append($compont);
                return $compont;
            }
        },
        //文本区
        textarea: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="textarea" ><i class="fa fa-align-justify"></i>文本区</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '文本区',
                    type: "textarea",
                    field: "",
                    proportion: '1',
                    verify: '',
                    height: '100',
                    dfvalue: '' // 默认值
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "文本区" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component, verifyDatalist2);
                var _html = '';
                _html += '<div class="M-component-title">区域高度</div>';
                _html += '<div class="M-component-control"><input id="M_component_height" type="text" class="form-control" /></div>';
                _html += '<div class="M-component-title">默认值<i title="仅在添加数据时默认填入" class="help fa fa-question-circle"></i></div>';
                _html += '<div class="M-component-control"><input id="M_component_dfvalue" type="text" class="form-control" placeholder="无则不填"/></div>';

                $html.append(_html);

                $html.find('#M_component_height').val(dfop.height);
                $html.find('#M_component_height').on('input propertychange', function () {
                    var value = $(this).val();
                    dfop.height = value;
                });

                $html.find('#M_component_dfvalue').val(dfop.dfvalue);
                $html.find('#M_component_dfvalue').on('input propertychange', function () {
                    var value = $(this).val();
                    dfop.dfvalue = value;
                });
            },
            //使用表单的时候渲染成table
            renderTable: function (compont, $row) {
                var $compont = $('<textarea id="' + compont.id + '"  class="form-control" ' + 'style="height: ' + compont.height + 'px;" />');
                $compont.val(compont.dfvalue);

                $row.append($compont);
                return $compont;
            },
            //使用查询的时候渲染成input
            renderQuery: function (compont, $row) {
                var $compont = $('<input id="' + compont.id + '" type="text" class="form-control" />');
                $row.append($compont);
                return $compont;
            }
        },
        //编辑器
        texteditor: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="texteditor" ><i class="fa fa-edit"></i>编辑器</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '编辑器',
                    type: "texteditor",
                    field: "",
                    proportion: '1',
                    verify: '',
                    height: '200',
                    dfvalue: '' // 默认值
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "编辑器" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component, verifyDatalist2);
                var _html = '';
                _html += '<div class="M-component-title">区域高度</div>';
                _html += '<div class="M-component-control"><input id="M_component_height" type="text" class="form-control" /></div>';
                _html += '<div class="M-component-title">默认值<i title="仅在添加数据时默认填入" class="help fa fa-question-circle"></i></div>';
                _html += '<div class="M-component-control"><input id="M_component_dfvalue" type="text" class="form-control" placeholder="无则不填"/></div>';

                $html.append(_html);

                $html.find('#M_component_height').val(dfop.height);
                $html.find('#M_component_height').on('input propertychange', function () {
                    var value = $(this).val();
                    dfop.height = value;
                });

                $html.find('#M_component_dfvalue').val(dfop.dfvalue);
                $html.find('#M_component_dfvalue').on('input propertychange', function () {
                    var value = $(this).val();
                    dfop.dfvalue = value;
                });
            },
            //使用表单的时候渲染成ueditor富文本框
            renderTable: function (compont, $row) {
                var $dg = $('<div id="' + compont.id + '" class="edui-default" style="width:100%;"></div>');
                var $compont = $('<div id="edui' + compont.id + '" style="width:100%;height:' + compont.height + 'px;"></div>');
                $row.append($dg);
                $dg.append($compont);
                setTimeout(function () {
                    $dg[0].ue = UM.getEditor('edui' + compont.id);
                    if (compont.dfvalue != '') {
                        $dg[0].ue.ready(function () {
                            $dg[0].ue.setContent(compont.dfvalue);
                        });
                    }
                }, 300);
                return $dg;
            },
            //使用查询的时候渲染成input
            renderQuery: function (compont, $row) {
                var $compont = $('<input id="' + compont.id + '" type="text" class="form-control" />');
                $row.append($compont);
                return $compont;
            }
        },
        //单选框
        radio: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="radio"><i class="fa fa-circle-thin"></i>单选框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '单选项',
                    type: "radio",
                    field: "",
                    proportion: '1',
                    dataSource: '0',  //0数据字典
                    dataSourceId: '',
                    itemCode: '',
                    dfvalue: '' // 默认值
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "单选项" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component);
                var _html = '';
                _html += '<div class="M-component-title">数据来源</div>';
                _html += '<div class="M-component-control"><div id="M_component_dataSource"></div></div>';
                _html += '<div class="M-component-title">数据选项</div>';
                _html += '<div class="M-component-control"><div id="M_component_dataItemCode"></div></div>';
                _html += '<div class="M-component-title">默认值<i title="仅在添加数据时默认填入" class="help fa fa-question-circle"></i></div>';
                _html += '<div class="M-component-control"><div id="M_component_dfvalue"></div></div>';

                $html.append(_html);
                setDatasource(dfop);
            },
            renderTable: function (compont, $row) {
                //使用表单的时候渲染成table
                var $compont = $('<div class="M-radio"></div>');
                /*获取数据字典或者数据源数据*/
                if (compont.dataSource == '0') {
                    //异步取缓存的数据字典，进行赋值
                    ibpm.clientdata.getAllAsync('dataItem', {
                        code: compont.itemCode,
                        callback: function (dataes) {
                            $.each(dataes, function (id, item) {
                                var $point = $('<label><input name="' + compont.id + '" value="' + item.value + '"' + (compont.dfvalue == item.value ? "checked" : "") + ' type="radio">' + item.text + '</label>');
                                $compont.append($point);
                            });
                        }
                    });
                }
                $row.append($compont);
                return $compont;
            },
            renderQuery: function (compont, $row) {
                var $compont = $('<div class="M-radio"></div>');
                /*获取数据字典或者数据源数据*/
                if (compont.dataSource == '0') {
                    ibpm.clientdata.getAllAsync('dataItem', {
                        code: compont.itemCode,
                        callback: function (dataes) {
                            $.each(dataes, function (id, item) {
                                var $point = $('<label><input name="' + compont.id + '" value="' + item.value + '"' + (compont.dfvalue == item.value ? "checked" : "") + ' type="radio">' + item.text + '</label>');
                                $compont.append($point);
                            });
                        }
                    });
                }
                $row.append($compont);
                return $compont;
            }
        },
        //多选框
        checkbox: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="checkbox" ><i class="fa fa-square-o"></i>多选框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '多选项',
                    type: "checkbox",
                    field: "",
                    proportion: '1',
                    dataSource: '0',  // 0数据字典
                    dataSourceId: '',
                    itemCode: '',
                    dfvalue: '' // 默认值
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "多选项" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component);
                var _html = '';
                _html += '<div class="M-component-title">数据来源</div>';
                _html += '<div class="M-component-control"><div id="M_component_dataSource"></div></div>';
                _html += '<div class="M-component-title">数据选项</div>';
                _html += '<div class="M-component-control"><div id="M_component_dataItemCode"></div></div>';
                _html += '<div class="M-component-title">默认值<i title="仅在添加数据时默认填入" class="help fa fa-question-circle"></i></div>';
                _html += '<div class="M-component-control"><div id="M_component_dfvalue"></div></div>';

                $html.append(_html);
                setDatasource(dfop);
            },
            //使用表单的时候渲染成table
            renderTable: function (compont, $row) {
                var $compont = $('<div class="M-checkbox"></div>');
                /*获取数据字典或者数据源数据*/
                if (compont.dataSource == '0') {
                    ibpm.clientdata.getAllAsync('dataItem', {
                        code: compont.itemCode,
                        callback: function (dataes) {
                            $.each(dataes, function (id, item) {
                                var $point = $('<label><input name="' + compont.id + '" value="' + item.value + '"' + (compont.dfvalue == item.value ? "checked" : "") + ' type="checkbox">' + item.text + '</label>');
                                $compont.append($point);
                            });
                        }
                    });
                }
                $row.append($compont);
                return $compont;
            },
            renderQuery: function (compont, $row) {
                var $compont = $('<div class="checkbox"></div>');
                /*获取数据字典或者数据源数据*/
                if (compont.dataSource == '0') {
                    ibpm.clientdata.getAllAsync('dataItem', {
                        code: compont.itemCode,
                        callback: function (dataes) {
                            $.each(data, function (id, item) {
                                var $point = $('<label><input name="' + compont.id + '" value="' + item.value + '"' + (compont.dfvalue == item.value ? "checked" : "") + ' type="checkbox">' + item.text + '</label>');
                                $compont.append($point);
                            });
                        }
                    });
                }
                $row.append($compont);
                return $compont;
            }
        },
        //下拉框
        select: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="select" ><i class="fa fa-caret-square-o-right"></i>下拉框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '下拉框',
                    type: "select",
                    field: "",
                    proportion: '1',
                    verify: '',
                    dataSource: '0',  // 0数据字典
                    dataSourceId: '',
                    itemCode: '',
                    dfvalue: '' // 默认值
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "下拉框" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component, verifyDatalist2);
                var _html = '';
                _html += '<div class="M-component-title">数据来源</div>';
                _html += '<div class="M-component-control"><div id="M_component_dataSource"></div></div>';
                _html += '<div class="M-component-title">数据选项</div>';
                _html += '<div class="M-component-control"><div id="M_component_dataItemCode"></div></div>';
                _html += '<div class="M-component-title">默认值<i title="仅在添加数据时默认填入" class="help fa fa-question-circle"></i></div>';
                _html += '<div class="M-component-control"><div id="M_component_dfvalue"></div></div>';

                $html.append(_html);
                setDatasource(dfop);
            },
            //使用表单的时候渲染成table
            renderTable: function (compont, $row) {
                var $compont = $('<div id="' + compont.id + '"></div>');
                $row.append($compont);
                /*获取数据字典或者数据源数据*/
                if (compont.dataSource == '0') {
                    $compont.ibpm_DataItemSelect({
                        allowSearch: true,
                        code: compont.itemCode
                    }).ibpm_selectSet(compont.dfvalue);
                }
                return $compont;
            },
            renderQuery: function (compont, $row) {
                var $compont = $('<div id="' + compont.id + '"></div>');
                $row.append($compont);
                /*获取数据字典或者数据源数据*/
                if (compont.dataSource == '0') {
                    $compont.ibpm_DataItemSelect({
                        allowSearch: true,
                        code: compont.itemCode
                    }).ibpm_selectSet(compont.dfvalue);
                }
                return $compont;
            }
        },
        //日期框
        datetime: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="datetime"><i class="fa fa-calendar"></i>日期框</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '日期框',
                    type: "datetime",
                    field: "",
                    proportion: '1',
                    verify: '',
                    dateformat: '0',
                    dfvalue: ''       // 默认值
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: '日期框' }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component, verifyDatalist2);
                var _html = '';
                _html += '<div class="M-component-title">日期格式</div>';
                _html += '<div class="M-component-control"><div id="M_component_dateformat"></div></div>';
                _html += '<div class="M-component-title">默认值<i title="仅在添加数据时默认填入" class="help fa fa-question-circle"></i></div>';
                _html += '<div class="M-component-control"><div id="M_component_dfvalue"></div></div>';

                $html.append(_html);
                $('#M_component_dateformat').ibpm_select({
                    data: [{ id: '0', text: '仅日期' }, { id: '1', text: '日期和时间' }],
                    value: 'id',
                    text: 'text',
                    placeholder: false,
                    select: function (item) {
                        dfop.dateformat = item.id;
                    }
                }).ibpm_selectSet(dfop.dateformat);
                $('#M_component_dfvalue').ibpm_select({
                    data: [{ id: '0', text: '昨天' }, { id: '1', text: '今天' }, { id: '2', text: '明天' }],
                    value: 'id',
                    text: 'text',
                    select: function (item) {
                        if (!!item) {
                            dfop.dfvalue = item.id;
                        }
                        else {
                            dfop.dfvalue = '';
                        }
                    }
                }).ibpm_selectSet(dfop.dfvalue);
            },
            //使用表单的时候渲染成table
            renderTable: function (compont, $row) {
                var dateformat = compont.dateformat == '0' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm';
                var datedefault = "";
                var datetime = new Date();
                switch (compont.dfvalue) {
                    case "0":
                        datedefault = datetime.DateAdd('d', -1);
                        break;
                    case "1":
                        datedefault = datetime.DateAdd('d', 0);
                        break;
                    case "2":
                        datedefault = datetime.DateAdd('d', 1);;
                        break;
                }
                datedefault = ibpm.formatDate(datedefault, dateformat.replace(/H/g, 'h'));
                var $dg = $('<div class="input-group date"></div>');
                var $fa = $('<span class="input-group-addon"><i class="fa fa-calendar"></i></span>');
                $dg.append($fa);
                var $compont = $('<input value="' + datedefault + '" id="' + compont.id + '" type="text" class="form-control M-input-wdatepicker" />');
                $dg.append($compont);
                $row.append($dg);
                $compont.ibpm_datepicker(false);
                return $compont;
            }
        },
        //单据编码
        encode: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="encode" ><i class="fa fa-barcode"></i>编 码</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '编 码',
                    type: "encode",
                    field: "",
                    proportion: '1',
                    rulecode: '',
                    isHide: '0',  // 是否隐藏
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: "编 码" }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component);
                var _html = '';
                _html += '<div class="M-component-title">单据规则</div>';
                _html += '<div class="M-component-control"><div id="M_component_rulecode"></div></div>';

                $html.append(_html);

                $('#M_component_rulecode').ibpm_select({
                    value: 'F_Code',
                    text: 'F_Name',
                    title: 'F_Name',
                    allowSearch: true,
                    select: function (item) {
                        if (!!item) {
                            dfop.rulecode = item.F_Code;
                        }
                        else {
                            dfop.rulecode = '';
                        }
                    }
                }).ibpm_selectSet(dfop.rulecode);

                if (!!ruleCode) {
                    $('#M_component_rulecode').ibpm_selectRefresh({
                        data: ruleCode
                    });
                }
                else {
                    ibpm.httpAsync('GET', top.$.rootUrl + '/WorkDone/GetCodeRule', {}, function (data) {
                        ruleCode = data;
                        $('#M_component_rulecode').ibpm_selectRefresh({
                            url: false,
                            data: ruleCode
                        });
                    });
                }

            },
            //使用表单的时候渲染成table
            renderTable: function (compont, $row) {
                var $compont = $('<input id="' + compont.id + '" type="text" readonly class="form-control" />');
                ibpm.httpAsync('GET', top.$.rootUrl + '/WorkDone/GetEnCode', { F_Code: compont.rulecode }, function (data) {
                    if (!$compont.val()) {
                        $compont.val(data);
                    }
                });

                $row.append($compont);
                return $compont;
            },
            renderQuery: function (compont, $row) {
                var $compont = $('<input id="' + compont.id + '" type="text" class="form-control" />');
                $row.append($compont);
                return $compont;
            }
        },
        //附件框
        upload: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="upload" ><i class="fa fa-paperclip"></i>附件上传</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '附件上传',
                    type: "upload",
                    field: "uploadEnc", //字段ID固定，一个表单只配一个附件组件
                    proportion: '1',                    
                    ExId: '',   //配置关联模板ID
                    OnlyRead: '0'
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: '附件上传' }));
            },
            property: function ($component) {
                var dbId = $('#dbId').val();
                var dfop = $component[0].dfop;
                dfop.ExId = dbId;
                setComponentPropertyHtmlex($component);
            },
            renderTable: function (compont, $row) {
                var $compont = $('<div id="' + compont.id + '" type="upload" data-field="' + compont.field + '"></div>');
                $row.append($compont);
                var read = compont.OnlyRead == '0';
                $compont.ibpm_Uploader({ value: compont.ExId, isUpload: read });
                return $compont;
            }
        },
        //相关图片
        pic: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="pic" ><i class="fa fa-paperclip"></i>相关图片</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '相关图片',
                    type: "pic",
                    field: "uploadPic",
                    proportion: '1',
                    ExId: '',   //配置关联模板ID
                    OnlyRead: '0'
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: '相关图片' }));
            },
            property: function ($component) {
                var dbId = $('#dbId').val();
                var dfop = $component[0].dfop;
                dfop.ExId = dbId;
                setComponentPropertyHtmlpic($component);
            },
            renderTable: function (compont, $row) {
                var $compont = $('<div id="' + compont.id + '" type="pic" data-field="' + compont.field + '"></div>');
                $row.append($compont);
                var read = compont.OnlyRead != '0';
                $compont.ibpm_pic({ value: compont.ExId, isOnlyRead: read });
                return $compont;
            }
        },
        //内置选项
        organize: {
            init: function () {
                var $html = $('<div class="M-custmerform-component" data-type="organize" ><i class="fa fa-coffee"></i>内置选项</div>');
                return $html;
            },
            render: function ($component) {
                $component[0].dfop = $component[0].dfop || {
                    title: '内置选项',
                    type: "organize",
                    field: "",
                    proportion: '1',
                    dataType: ''
                };
                $component.html(getComponentRowHtml({ name: $component[0].dfop.title, text: '内置选项' }));
            },
            property: function ($component) {
                var dfop = $component[0].dfop;
                var $html = setComponentPropertyHtml($component, verifyDatalist2);
                var _html = '';
                _html += '<div class="M-component-title">取值选择</div>';
                _html += '<div class="M-component-control"><div id="M_component_dataType"></div></div>';

                $html.append(_html);
                /*取值选择*/
                ibpm.clientdata.getAllAsync('SysExInfo', {
                    code: 'root',
                    callback: function (dataes) {
                        var rootlist = [];
                        $.each(dataes, function (_index, _item) {
                            rootlist.push({ id: _item.value, text: _item.text, title: _item.text, k: _index });
                        });
                        $('#M_component_dataType').ibpm_select({
                            allowSearch: true,
                            data: rootlist,
                            type: 'default',
                            value: 'id',
                            text: 'text',
                            select: function (item) {
                                if (!!item) {
                                    dfop.dataType = item.id;
                                }
                                else {
                                    dfop.dataType = '';
                                }
                            }
                        }).ibpm_selectSet(dfop.dataType);
                    }
                });
            },
            renderTable: function (compont, $row) {
                var $compont = $('<div id="' + compont.id + '" ></div>');
                $row.append($compont);
                $compont.ibpm_GirdSelectRule({
                    param: { itemCode: compont.dataType },
                });
                return $compont;
            }
        },
    }

    // 数据字典选择初始化、数据源选择初始化
    function setDatasource(dfop) {
        $('#M_component_dataSource').ibpm_select({
            data: [{ id: '0', text: '数据字典' }],
            value: 'id',
            text: 'text',
            placeholder: false,
        }).ibpm_selectSet(dfop.dataSource);

        $('#M_component_dfvalue').ibpm_select({
            allowSearch: true,
            select: function (item) {
                if (!!item) {
                    dfop.dfvalue = item.id;
                }
                else {
                    dfop.dfvalue = '';
                }
            }
        }).ibpm_selectSet(dfop.dfvalue);

        ibpm.clientdata.getAllAsync('dataItem', {
            code: 'root',
            callback: function (dataes) {
                var rootlist = [];
                $.each(dataes, function (_index, _item) {
                    rootlist.push({ id: _item.value, text: _item.text, title: _item.text, k: _index });
                });
                $('#M_component_dataItemCode').ibpm_select({
                    allowSearch: true,
                    data: rootlist,
                    type: 'default',
                    value: 'id',
                    text: 'text',
                    select: function (item) {
                        if (!!item) {
                            if (dfop.dataSourceId != item.id) {
                                dfop.dfvalue = '';
                                dfop.itemCode = item.id;
                            }
                            //---异步取缓存中的数据字典---
                            ibpm.clientdata.getAllAsync('dataItem', {
                                code: item.id,
                                callback: function (dataes) {
                                    var list = [];
                                    $.each(dataes, function (_index, _item) {
                                        list.push({ id: _item.value, text: _item.text, title: _item.text, k: _index });
                                    });

                                    $('#M_component_dfvalue').ibpm_selectRefresh({
                                        value: "id",
                                        text: "text",
                                        title: "title",
                                        data: list,
                                        url: false
                                    });
                                }
                            });
                        }
                        else {
                            dfop.itemCode = '';
                            $('#M_component_dfvalue').ibpm_selectRefresh({ url: '', data: [] });
                        }
                    }
                });
            }
        });
    };
    // html编码
    function htmlEncode(text) {
        text = text || "";
        text = text.replace(/%/g, "{@bai@}");
        text = text.replace(/ /g, "{@kong@}");
        text = text.replace(/</g, "{@zuojian@}");
        text = text.replace(/>/g, "{@youjian@}");
        text = text.replace(/&/g, "{@and@}");
        text = text.replace(/\"/g, "{@shuang@}");
        text = text.replace(/\'/g, "{@dan@}");
        text = text.replace(/\t/g, "{@tab@}");
        text = text.replace(/\+/g, "{@jia@}");

        return text;
    }
    // html解码
    function htmlDecode(text) {
        text = text || "";
        text = text.replace(/{@bai@}/g, "%");
        text = text.replace(/{@dan@}/g, "'");
        text = text.replace(/{@shuang@}/g, "\"");
        text = text.replace(/{@kong@}/g, " ");
        text = text.replace(/{@zuojian@}/g, "<");
        text = text.replace(/{@youjian@}/g, ">");
        text = text.replace(/{@and@}/g, "&");
        text = text.replace(/{@tab@}/g, "\t");
        text = text.replace(/{@jia@}/g, "+");

        return text;
    }

})(jQuery, top.ibpm);
